<template>
	<view class="container">
		<uv-navbar title="配音和背景音乐" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="music-box">
			<view class="music-item">
				<view class="title">这里显示AI自动生成的标题这里显示AI自 动生成的标题</view>
				<view class="describe">这里显示Ai自动生成的描述文案这里显示Ai自动 生成的描述文案</view>
				<view class="button-box">
					<view class="button-p" @click="onMusic(1)">选择配音风格</view>
					<view class="button-p" @click="backgroundMusic(1)">选择背景音乐</view>
				</view>
			</view>
			<view class="music-item">
				<view class="title">这里显示AI自动生成的标题这里显示AI自 动生成的标题</view>
				<view class="describe">这里显示Ai自动生成的描述文案这里显示Ai自动 生成的描述文案</view>
				<view class="button-box">
					<view class="button-p">选择配音风格</view>
					<view class="button-p">选择背景音乐</view>
				</view>
			</view>
			<view class="music-item">
				<view class="title">这里显示AI自动生成的标题这里显示AI自 动生成的标题</view>
				<view class="describe">这里显示Ai自动生成的描述文案这里显示Ai自动 生成的描述文案</view>
				<view class="button-box">
					<view class="button-p">选择配音风格</view>
					<view class="button-p">选择背景音乐</view>
				</view>
			</view>
		</view>
		<view class="button-fb-box">
			<view class="button-fb-s" @click="inSubmit">上一步</view>
			<view class="button-fb" @click="onSubmit">下一步</view>
		</view>
		<uv-popup ref="popup" mode="bottom" bgColor="#F7F8FA">
			<view class="pop-box">
				<view class="music-item">
					<image class="image" src="../../static/logo.png" mode="aspectFill"></image>
					<view class="title1">语音包语言包语言包语言包语言包</view>
					<view class="button"  @click="onSelect()">选择他</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {};
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			backgroundMusic() {
				this.$refs.popup.open();
			},
			onMusic() {
				this.$refs.popup.open();
			},
			onSelect(){
				this.$refs.popup.close();
			},

			onSubmit() {
				// this.$refs.form.validate().then(res => {
				// 	console.log(res);
				// 	uni.showToast({
				// 		icon: 'success',
				// 		title: '校验通过'
				// 	})
				// }).catch(errors => {
				// 	console.log(errors);
				// 	uni.showToast({
				// 		icon: 'error',
				// 		title: '校验失败'
				// 	})
				// })
				app.navigationTo('page_account/create/finished')
				console.log(this.form);
			},
			inSubmit() {
				// app.navigationTo('page_account/create/official')
				app.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		padding: 42rpx;
		padding-top: 226rpx;
		padding-bottom: calc(96rpx + 32rpx + 42rpx);
		box-sizing: border-box;
		background: #F7F8FA;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.music-box {
			.music-item {
				width: 670rpx;
				height: 432rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx;
				border: 2rpx solid #FFFFFF;
				padding: 40rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 48rpx;
					margin-bottom: 32rpx;
				}

				.describe {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					margin-bottom: 40rpx;
				}

				.button-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.button-p {
						width: 288rpx;
						height: 76rpx;
						background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
						border-radius: 16rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 76rpx;
						text-align: center;
					}
				}
			}
		}

		.pop-box {
			height: 90vh;
			width: 100vw;
			padding: 22rpx 20rpx;
			box-sizing: border-box;

			.music-item {
				height: 192rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.image {
					flex-shrink: 0;
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
				}

				.title1 {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-right: 150rpx;
				}

				.button {
					flex-shrink: 0;
					width: 124rpx;
					height: 60rpx;
					background: #EFEEF3;
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}


		.button-fb-box {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.button-fb {
				width: 326rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}

			.button-fb-s {
				width: 326rpx;
				height: 96rpx;
				border: 2rpx solid #4635FF;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4635FF;
				line-height: 96rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
</style>